<template>
  <div style="height: 100%;">
    <el-container>
      <el-header>
        <el-button @click="cancel">取消</el-button>
      </el-header>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-col :span="15">
            <el-input v-model="form.title"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="分类" prop="classification">
          <el-col :span="15">
            <el-input v-model="form.classification"></el-input>
          </el-col>
        </el-form-item>
        <el-main style="height: 630px; display: flex; align-items: stretch">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.text"
            class="textarea-input"
          />
        </el-main>
      </el-form>
      <el-footer style="justify-content:flex-end" size="medium">
        <el-button @click="confirm">确定</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "TextEdit",
  data() {
    return {
      id:"",
      form: {
        title: "",
        classification: "",
        text: ""
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        classification: [
          { required: true, message: '请输入分类', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
      this.id = this.$route.params.announcementId;
    },
  methods: {
    
    cancel() {
      this.$router.push('/MessageMange');
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 确定逻辑，比如发送请求保存数据
          this.$refs.form.validate((valid) => {
          if (valid) {
            console.log(this.id)
            this.$axios.put('http://localhost:8082/announcement/'+this.id, this.form).then(res => res.data).then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  message: '编辑成功'
                });
              } else {
                this.$message({
                  message: '编辑失败'
                });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
          this.$router.push('/MessageMange');
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>
.el-header, .el-footer {
  width: 100%;
  height: 50px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 修改为 flex-start 以使按钮靠左 */
}

.textarea-input {
  width: 100%;
  border: 1px solid black;
  resize: none; /* 防止用户拖动改变文本框大小 */
}
</style>
